<template>
  <div style="height: 100%;">

    <div class="game-home-header">
        <div style="width: 96%;height: 100%;color: white;display: flex;align-items: center;justify-content: space-between;">
            <span style="letter-spacing: 5px;font-size: large;display: flex;align-items: center;height: 70px;line-height: 70px;">
              <span @click="backToHome">
                <el-icon><ArrowLeftBold /></el-icon>
                返回
              </span>
              <div class="el-divider el-divider--vertical" role="separator" style="--el-border-style: solid;"><!--v-if--></div>
              <span style="margin-left: 10px;">{{ game.gameName }}</span>
            </span>
        </div>
    </div>

    <div style="margin: 90px auto 0 auto;height: 300px;width:100%;background-color: rgba(255, 255, 255, 0);display: flex;justify-content: center;align-items: center;flex-wrap: wrap;flex-direction: row;">
      
      <div style="width: 500px;height:300px;display: flex;justify-content: left;align-items: center;flex-wrap: wrap;flex-direction: row;">
        <div style="width: 100%;height: 300px;">

          <el-carousel height="300px" style="width: 100%;" trigger="hover">
            <el-carousel-item v-for="(item, index) in images" :key="index">
                <el-image 
                    :src="item" 
                    fit="fill"
                    style="width: 100%;height: 100%;display: block;"
                ></el-image>
            </el-carousel-item>
          </el-carousel>

          <!-- <img style="height: 100%;width: 100%;" src="https://www.bnx1314.com/website-api/download/img/game/detail/500-0300b87d0d83438189b16d8c5932a9ad-gameDetailImgUrl.jpg" /> -->
        </div>
        <!-- <div style="background-color: red;width: 25%;height: 100px;">
          <img style="height: 100%;width: 100%;" src="https://www.bnx1314.com/website-api/download/img/game/detail/500-0300b87d0d83438189b16d8c5932a9ad-gameDetailImgUrl.jpg" />
        </div>
        <div style="background-color: green;width: 25%;height: 100px;">
          <img style="height: 100%;width: 100%;" src="https://www.bnx1314.com/website-api/download/img/game/detail/500-01f41ea1bf4c4672b2cd400aa82535a6-gameDetailImgUrl.jpg" />
        </div>
        <div style="background-color: green;width: 25%;height: 100px;">
          <img style="height: 100%;width: 100%;" src="https://www.bnx1314.com/website-api/download/img/game/detail/500-0300b87d0d83438189b16d8c5932a9ad-gameDetailImgUrl.jpg" />
        </div>
        <div style="background-color: green;width: 25%;height: 100px;">
          <img style="height: 100%;width: 100%;" src="https://www.bnx1314.com/website-api/download/img/game/detail/500-b498cd06c686415ba1b3734d6a00cc78-gameDetailImgUrl.jpg" />
        </div> -->
      </div>

      <div style="height: 100%;width: 50%;padding: 20px;">
        <div style="font-size: 30px;font-weight: bold;letter-spacing: 2px;">{{ game.gameName }}</div>
        <div style="width: 100%;color: white;display: grid;grid-template-columns: 28% 35% 30%;grid-template-rows: 50px;margin-top: 10px;height: 40px;">
          <div>游戏序号: {{ game.gameCode }}</div>
          <div>游戏类型: {{ game.gameType }}</div>
          <div>游戏大小: {{ game.gameSize }} GB</div>
        </div>

        <div style="height: 140px;">
          <div class="recommendRequire">操作系统: <span style="color: rgba(255, 255, 255, 0.8);">{{ game.osRequire }}</span></div>
          <div class="recommendRequire">处理器: <span style="color: rgba(255, 255, 255, 0.8);">{{ game.cpuRequire }}</span></div>
          <div class="recommendRequire">内存: <span style="color: rgba(255, 255, 255, 0.8);">{{ game.ramRequire }}</span></div>
          <div class="recommendRequire">显卡: <span style="color: rgba(255, 255, 255, 0.8);">{{ game.graphicsRequire }}</span></div>
          <div class="recommendRequire">存储空间: <span style="color: rgba(255, 255, 255, 0.8);">{{ game.diskRequire }}</span></div>
        </div>

        <div>
          <el-button type="warning" size="large" icon="Download" @click="openDownload = true" :disabled='!member.isMember'>下载</el-button>
          
        </div>
      </div>

      

    </div>

    <div style="width: 100%;display: flex;justify-content: center;margin-top: 20px;">
      <div class="game-intro">
        <div style="font-size: large;font-weight: bold">
          游戏详情
        </div>
        <div style="width: 100%;height: 400px;" v-html="game.detailText"></div>
      </div>
    </div>

    <el-dialog
      v-model="openDownload"
      title="下载"
      width="500"
      style="user-select: text;"
    >
      <div>百度网盘: {{game.baiduNetDiskUrl}}</div>
      <div>其他: {{game.otherNetDiskUrl}}</div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="openDownload = false">取消</el-button>
          <el-button type="primary" @click="openDownload = false">
            复制
          </el-button>
        </div>
      </template>
    </el-dialog>
    

  </div>
</template>

<script>
import { getGameByGameId } from '../api/game';
import {getLoginMember} from '../api/member.js'

export default {
    name: 'GameDetail',
    data() {
        return {
          member: {},
          baiduNetDiskUrl: '',
          otherNetDiskUrl: '',
          openDownload: false,
          gameId: null,
          gameName: '',
          currentImage: '', // 初始大图路径（作为背景图片）
          images: [

            

          ],
          
          game: {
            id: null,
            gameName: '',
            detailText: '',
          }
          
        }
    },

    methods: {
      backToHome() {
        this.$router.go(-1)
      }
    },
    mounted() {
      window.scrollTo(0, 0);
    },
    created() {

      getLoginMember().then(resp => {
          this.member = resp.data.data

      })

      this.game.id = this.$route.query.gameId
      getGameByGameId(this.game.id).then(resp => {
        this.game = resp.data.data
        let detailImgList = this.game.detailImg.split(',')
        this.images = detailImgList
      })
    }
}
</script>

<style scoped>

.game-intro {
  width: calc(500px + 50%);
}

.recommendRequire {
  color: rgba(255, 255, 255, 0.4);
  
}

</style>